<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟用户登录</title>
		<link rel="stylesheet"  href="css/bootstrap.min.css"/>
		<!-- 导入外部js文件 -->
		<script src="js/jquery.min.js"></script>
		<style>
			/* 限制网页的宽度 */
			.container{
				width: 500px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h3>用户登录</h3>
			<div id="msg" style="display: none;background-color: #1B6D85;margin: 10px;">默认</div>
			<div class="form-group">
				<label for="username">用户名：</label>
				<input type="text" autocomplete="off" placeholder="请输入用户名" class="form-control" id="username" name="username" />
			</div>
			<div class="form-group">
				<label for="pw">密码：</label>
				<input type="password" autocomplete="off" placeholder="请输入密码" class="form-control" id="pw" name="pw" />
			</div>
			<div>
				<button onclick="doSubmit()" id="btnSubmit" class="btn btn-success" >登录</button>
				<button onclick="doClear()" id="btnClear" class="btn btn-danger" >清空</button>
			</div>
		</div>
	</body>
	<script>
		function jsdoSubmit(){
			// 获取用户名框内容
			var username = document.getElementById("username");
			// 打印到控制台
			console.log(username);
			console.log(username.value);
			var msg = document.getElementById("msg");
			msg.innerText=username.value+"登录成功";
			msg.style="display:block;color:white;background-color:#1B6D85;margin:10px;padding:10px";
		}
		function jsdoClear(){
			document.getElementById("username").value="";//清空值，双引号清空
			document.getElementById("pw").value='';//清空值,单引号清空
		}
		// jQuery语法来实现
		function doSubmit(){
			var username = $("#username");
			var msg = $("#msg");
			//替代掉innerText，使用text()方法；替代value使用val
			msg.text(username.val()+"登录成功");
			// jquery，专门支持css设置，方法：两个值key,value
			msg.css("display","block");
			msg.css("color","white");
			msg.css("background-color","#1B6D85");
			msg.css("margin","10px");
			msg.css("padding","10px");
			
		}
		// jQuery语法来实现
		function doClear(){
			//置空
			// 选择器selector（标签直接写名字，class属性，id属性）
			$("#username").val('');
			$("#pw").val('');
		}
	</script>
</html>
